<template>
  <div :class="className">
    <!-- style -->
    <div v-html="css"></div>
    <!--收入提现数据-->
    <div class="income-withdrawal">
        <div class="top">
          <div  @click="to('1')" class="top-item">
              <div class="top-item-total">{{this.datas.list.team_amount}}</div>
              <div>团队服务佣金(元)</div>
          </div>
          <div  @click="to('2')" class="top-item">
              <div class="top-item-total">{{this.datas.list.area_dividend_amount}}</div>
              <div>区域内服务佣金(元)</div>
          </div>
          <div  @click="to('3')" class="top-item">
              <div class="top-item-total">{{this.datas.list.region_external_amount}}</div>
              <div>区域外服务佣金(元)</div>
          </div>
        </div>
        <div class="middle">
          <div  class="middle-item" @click="to('4')">
              <div class="middle-item-total">{{this.datas.list.finish_withdraw_amount}}</div>
              <div>已提现金额(元)</div>
          </div>
          <div  class="middle-item" @click="to('5')">
              <div class="middle-item-total">{{this.datas.list.apply_withdraw_amount}}</div>
              <div>申请中金额(元)</div>
          </div>
          <div  class="middle-item" >
              <div class="middle-item-total">{{this.datas.list.wait_settlement_amount}}</div>
              <div>待结算总金额(元)</div>
          </div>
        </div>
        <div class="bottom">
          <div class="bottom-item">
              <div class="bottom-item-total">{{this.datas.list.wait_withdraw_amount}}</div>
              <div>待提现金额(元)</div>
          </div>
          <el-button class="bottom-button" @click="to('withdrawal')">去提现</el-button>
        </div>
    </div>
    <div>
    </div>
  </div>
</template>

<script>
import emptyImage from '../../assets/images/new_diy/image.png';
import { Toast } from "vant";
// 自定义样式
const css = function () {

  if(this.datas.template_bg) {
    // 确保数据已传入
    const {
      model_bg,
      name_color,
      number_color,
      button_bg_color,
      button_font_color,
      template_bg
    } = this.datas;

    return `
        .component-${this.id} .income-withdrawal {
                background-color: ${template_bg.color};
                background-image: url(${template_bg.isColor == 2? template_bg.image: ''});
                background-size: 100% auto;
                background-position: center;
        }
        .component-${this.id} .income-withdrawal .top .top-item{
                background-color: ${model_bg.color};
                background-image: url(${model_bg.isColor == 2? model_bg.image: ''});
                background-size: 100% auto;
                background-position: center;
                color:${name_color}
        }
        .component-${this.id} .income-withdrawal .top .top-item .top-item-total{
          color:${number_color}
        }

        .component-${this.id} .income-withdrawal .middle{
                background-color: ${model_bg.color};
                background-image: url(${model_bg.isColor == 2? model_bg.image: ''});
                background-size: 100% auto;
                background-position: center;
                color:${name_color}
        }
        .component-${this.id} .income-withdrawal .middle .middle-item .middle-item-total{
          color:${number_color}
        }
        .component-${this.id} .income-withdrawal .bottom{
                background-color: ${model_bg.color};
                background-image: url(${model_bg.isColor == 2? model_bg.image: ''});
                background-size: 100% auto;
                background-position: center;
                color:${name_color}
        }
        .component-${this.id} .income-withdrawal .bottom .bottom-item .bottom-item-total{
          color:${number_color}
        }
        .component-${this.id} .income-withdrawal .bottom .bottom-button{
            color:${button_font_color};
            background-color: ${button_bg_color};
        }
    `;
  }

};

export default {
  data() {
    return {
      emptyImage,
    };
  },
  props: ["id", "datas", "tabcontrol", 'lastIndex', 'index', "plugin_active","isBottom"],
  computed: {
    css() {
      return "<style>" + css.call(this) + "</style>";
    },
    className() {
      const name = ["component-wrapper", `component-${this.id}`];
      return name;
    },
  },

  methods: {
    to(name){
      switch (name) {
      case '1':
        this.$router.push(this.fun.getUrl("teamAgentCenter")); //跳转经销商管理页
        break;
      case '2':
        this.$router.push(this.fun.getUrl("regionalAgencyCenter")); //跳转区域代理中心页
        break;
      case '3':
        this.$router.push(this.fun.getUrl("outAreaList")); //跳转区域外管理页
        break;
      case '4':
        this.$router.push(this.fun.getUrl("presentationRecord",{}, { extension: 'extension' })); //跳转已提现金额明细页
        break;
      case '5':
        this.$router.push(this.fun.getUrl("presentationRecord",{}, { extension: 'extension' })); //跳转已提现金额明细页
        break;
      case 'withdrawal':
        this.$router.push(this.fun.getUrl("withdrawal")); //跳转提现明细页
        break;
      }
    }
  },

  mounted() {

  },
  created(){
    console.log(this.datas);
  }
};
</script>

<style lang="scss" scoped>
  // 默认
  .component-wrapper {
    width: 375px;
  }
  .income-withdrawal{
    padding: 12px;
    .top{
    display: flex;
    justify-content: space-around;
      .top-item{
        width: 112px;
        padding: 12px 4px;
        text-align: center;
        flex-direction: column;
        justify-content: center;
        border-radius: 8px;
        font-size: 12px;
        .top-item-total{
          font-size: 16px;
          margin-bottom: 5px;
          font-weight: 500;
        }
      }
    }
    .middle{
    margin: 9px  0;
    display: flex;
    border-radius: 8px;
    justify-content: space-around;
      .middle-item{
        width: 112px;
        padding: 12px 4px;
        text-align: center;
        flex-direction: column;
        justify-content: center;
        font-size: 12px;
        .middle-item-total{
          font-size: 16px;
          margin-bottom: 5px;
          font-weight: 500;
        }
      }
    }
    .bottom{
    display: flex;
    padding: 14px 12px;
    justify-content: space-between;
    align-items: center;
    border-radius: 8px;
    font-size: 12px;
    .bottom-item{
      .bottom-item-total{
            text-align: center;
            font-size: 16px;
            margin-bottom: 5px;
            font-weight: 500;
      }
    }
    .bottom-button{
      border-radius: 18px;
      font-size: 14px;
      width: 88px;
      padding: 9px 23px;
    }
    }
  }
</style>